<template>
  <div class="applyFor">
    <van-nav-bar title="资料修改" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="topTitle">
      <title-item title1st="请填写修改的资料信息"> </title-item>
    </div>
    <div class="Form">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field name="uploader" label="上传头像" label-width="100" :rules="[{ required: true, message: '请上传头像图片' }]">
            <template #input>
              <van-uploader v-model="avatar" :max-count="1" :after-read="afterRead" @delete="deleteFile" />
            </template>
          </van-field>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field v-model="name" name="name" label="卡经销商名称" label-width="105" placeholder="请输入卡经销商名称"
            :rules="[{ required: true, message: '请输入卡经销商名称' }]" />
          <van-field v-model="address" is-link readonly label-width="105" name="address" label="签约区域"
            :rules="[{ required: true, message: '请选择城市' }]" placeholder="点击选择城市" @click="showPicker = true" />
          <van-field v-model="email" label-width="105" type="text" name="email" label="对账邮箱" placeholder="请输入对账邮箱"
            :rules="[{ required: true, message: '请填对账邮箱' }]" />
          <van-field v-model="account_number" label-width="105" type="text" name="account_number" label="收款账号"
            placeholder="请输入收款账号" :rules="[{ required: true, message: '请上传收款二维码' }]" />
          <van-field name="uploader1" label="收款二维码" label-width="100" :rules="[{ required: true, message: '请上传收款二维码' }]">
            <template #input>
              <van-uploader v-model="account_image" :max-count="1" :after-read="afterRead1" @delete="deleteFile1" />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 105%)">
            提交
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-area v-model="city" title="城市选择" :area-list="areaList" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </div>
  </div>
</template>
  
<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { useRouter } from "vue-router";
import {
  showToast
} from 'vant';
const router = useRouter();
import { areaList } from '@vant/area-data';
import { dealerUpdate, getRegionservice } from "@/services";
import { closeToast, showLoadingToast } from "vant";
import { uploadMaterialImg } from '@/services/upLoad'
import { ref, onMounted } from "vue";
const name = ref("");
const account = ref("");
const address = ref("");
const email = ref("");
const account_number = ref("");
const showPicker = ref(false);
const avatar = ref([]);
const account_image = ref([]);
const imgList = ref([])//头像
const imgList1 = ref([])//收款二维码
let localInfo = localStorage.getItem('userinfo3')
let token = JSON.parse(localInfo).token
// console.log(userInfo)
const afterRead = async (fileData) => {
  console.log(111)
  avatar.status = 'uploading';
  avatar.message = '上传中...';
  var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
  dataV.append("file", fileData.file);
  let res = await uploadMaterialImg(fileData)
  imgList.value.push(res.fullurl)
  fileData.message = "上传成功";
};
const city = ref('');
const afterRead1 = async (fileData) => {
  avatar.status = 'uploading';
  avatar.message = '上传中...';
  var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
  dataV.append("file", fileData.file);
  let res = await uploadMaterialImg(fileData)
  imgList1.value.push(res.fullurl)
  fileData.message = "上传成功";
};

onMounted(async () => {
  if (token) {
    // userInfo = JSON.parse(localInfo)
    // console.log(userInfo)
    let res = await getRegionservice()
    address.value = res.data.address
    name.value = res.data.name
    email.value = res.data.email
    imgList.value = [res.data.avatar]
    avatar.value = [{ url: res.data.avatar }]
    imgList1.value = [res.data.account_image]
    account_image.value = [{ url: res.data.account_image }]
    account_number.value = res.data.account_number
  }
})
const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
  console.log(selectedValues)
  address.value = selectedOptions[0]?.text + selectedOptions[1]?.text + selectedOptions[2]?.text;
  showPicker.value = false;
};
const deleteFile1 = (e, detail) => {
  // console.log(e,detail,'deleteFile')
  imgList1.value.splice(detail.index, 1)
}
const deleteFile = (e, detail) => {
  // console.log(e,detail,'deleteFile')
  imgList.value.splice(detail.index, 1)
}
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onSubmit = async (val) => {
  console.log(val, '成功的值')
  const { name, email, address, account_number } = val
  const getAvtator = imgList.value.join()
  const account_image = imgList1.value.join()
  let Form = {
    name,  email, address, account_number,account_image,
    avatar: getAvtator
  }
  let res = await dealerUpdate(Form)
  showToast('修改成功');
  router.push({ path: '/home' })
}
// 返回按钮
const onClickLeft = () => {
  router.back();
};
</script>
  
<style lang="scss" scoped>
.applyFor {
  padding: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;

  .topTitle {
    margin-left: -4px;
  }
}
</style>
  